  <!-- 应用管理 -->
  <template>
  <div class="main-body">
      <header class="main-body-search">
        <el-form :model="search" @submit.native.prevent>
          <el-row :gutter="50" type="flex" justify="space-between">
          <el-col :span="12">
            <el-button type="primary" @click="showDetail({})" icon="el-icon-plus">新建应用</el-button>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-form-item label class="nja-form-line">
              <el-input
              style="width: 300px;"
                v-model.trim="search.appName"
                placeholder="应用名称"
                clearable
                @keyup.enter.native="searchHandle"
              >
              <div  slot="prefix" style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;">
                <i class="el-icon-search"></i>
              </div>
              <el-button type="primary" slot="append" @click="searchHandle">查询</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
      </header>
      <el-main class="main-body-table">
        <div class="table-shadow"></div>
        <el-table :data="tableData" stripe style="width: 100%" height="calc(100vh - 250px)">
          <el-table-column prop="orderNo" label="序号" align="center" width="80"></el-table-column>
          <el-table-column prop="appIcon" label="应用图标" align="center" width="150">
            <template slot-scope="scope">
              <el-image class="list-img" fit="contain" v-if="scope.row.appIcon" :src="scope.row.appIcon">
                <div slot="error" class="image-slot">暂无</div>
              </el-image>
              <el-image v-else class="list-img">
                <div slot="error" class="image-slot">暂无</div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="appName" label="应用名称" align="center" min-width="150"></el-table-column>
          <el-table-column prop="appType" label="应用类型" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.appType == 1 ? '平台系统' : '第三方'}}</template>
          </el-table-column>
          <el-table-column prop="appUrl" label="应用地址" align="center" min-width="200"></el-table-column>
          <el-table-column prop="needlogin" label="登录访问" align="center" width="100">
            <template slot-scope="scope">{{ scope.row.needlogin == 1 ? '是': '否' }}</template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="160px">
            <template slot-scope="scope">
              <div style="display: flex;">
                <el-button size="mini" type="primary" @click="showDetail(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger"  @click="deleteRow(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </el-table>
        <!--工具条-->
        <el-pagination
          background
          class="main-body-table-page"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :current-page="search.current"
          :page-size="search.size"
          :total="search.total"
        ></el-pagination>
      </el-main>
      <el-dialog
        :title="form.id ? '编辑应用' : '新增应用'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        center
        v-dialogDrag
        custom-class="mydialog"
        width="800px"
      >
        <el-form ref="form" class="formlayout" :model="form" label-width="90px" label-position="left">
          <el-row :gutter="30">
            <el-col :span="16">
              <el-form-item label="应用图标" prop="appIcon" required :rules="rules">
                <div class="face-img">
                    <el-upload
                      class="avatar-uploader"
                      action
                      :auto-upload="false"
                      :on-change="onChange"
                      :show-file-list="false"
                    >
                      <el-image v-if="form.appIcon" :src="form.appIcon" fit="contain" class="avatar hidden">
                        <!-- <div slot="error" class="avatar-uploader-icon">
                          <i class="el-icon-plus"></i>
                        </div> -->
                      </el-image>
                      <div class="avatar-uploader-icon">
                        <i class="el-icon-plus" :class="form.appIcon ? 'hiddle' : ''"></i>
                      </div>
                    </el-upload>
                  </div>
              </el-form-item>
              </el-col> 
              <el-col :span="8">
              <el-form-item label="登录访问" prop="needlogin" label-width="80px">
               <el-select style="width: 100%" v-model="form.needlogin">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
               </el-select>
              </el-form-item>
            </el-col>
              <el-col :span="12">
              <el-form-item label="应用名称" prop="appName" required :rules="rules">
                <el-input v-model="form.appName" placeholder="请输入应用名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="类型" prop="appType" label-width="40px">
               <el-select style="width: 100%" v-model="form.appType">
                <el-option label="平台系统" :value="1"></el-option>
                <el-option label="第三方" :value="0"></el-option>
               </el-select>
              </el-form-item>
            </el-col>
              <el-col :span="6">
              <el-form-item label="序号" prop="orderNo" label-width="40px">
                <el-input v-model="form.orderNo" type="number" placeholder="请输入序号" clearable></el-input>
              </el-form-item>
            </el-col>
              <el-col :span="24">
                <el-form-item label="应用地址" prop="appUrl" required :rules="rules">
                <el-input v-model="form.appUrl" placeholder="请输入应用地址" clearable></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="remarks">
                  <el-input v-model="form.remarks"  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" clearable placeholder="请输入备注"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" style="width: 120px;" @click="saveHandle">保存</el-button>
          <el-button style="width: 120px;" @click="dialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {
    SelectPage,
    DeleteHandle,
    InsertHandle,
    UpdateHandle
  } from '@/api/admin/app'
  export default {
    data() {
      return {
        dialogVisible: false,
        search: {
          current: 1,
          size: 20,
          total: 0,
          username: '',
          nickname: ''
        },
        types: {},
        roles: [],
        rules: [{required: true, message: '必填'}],
        form: {
          appName: '',
          appUrl: '',
          appType: 1,
          remarks: '',
          appIcon: ''
        },
        uploadFile: null,
        tableData: []
      }
    },
    methods: {
        /**
         * 选择文件
         */
        async onChange(file) {
          if (!this.beforeAvatarUpload(file.raw)) {
            return
          }
          this.uploadFile = file
          this.form.appIcon = URL.createObjectURL(file.raw)
          this.getBase64(file.raw).then(res => {
            this.form.appIcon = res
          });
        },
        getBase64(file) {
          return new Promise(function(resolve, reject) {
            let reader = new FileReader();
            let imgResult = "";
            reader.readAsDataURL(file);
            reader.onload = function() {
              imgResult = reader.result;
            };
            reader.onerror = function(error) {
              reject(error);
            };
            reader.onloadend = function() {
              resolve(imgResult);
            };
          });
        },
        beforeAvatarUpload(file) {
          console.log(file.type)
          const isImg = [
            'image/jpg',
            'image/png',
            'image/jpeg',
            'image/bmp'
          ].includes(file.type)
          const isLt2M = file.size / 1024 / 1024 < 2

          if (!isImg) {
            this.$message.error('只能是图片!')
          }
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!')
          }
          return isImg && isLt2M
        },
      showDetail(row) {
        this.form = Object.assign(
          {
            appName: '',
            appType: 1,
            appUrl: '',
            needlogin: 1,
            remarks: '',
            appIcon: ''
          },
          row
        )
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      saveHandle() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            // 保存
            let params = Object.assign({}, this.form)
            let API = InsertHandle
            if (params.id) {
              API = UpdateHandle
            }
            delete params.lastUpdateTime
            delete params.createTime
            API(params).then((res) => {
              console.log('RegisterRequest', res)
              if (res.code === 20000) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.dialogVisible = false
                this.loadData()
              }
            })
          }
        })
      },
      deleteRow(row) {
        console.log(row)
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DeleteHandle({ id: row.id }).then((res) => {
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.loadData()
            }
          })
        })
      },
      handleCurrentChange(val) {
        this.search.current = val
        this.loadData()
      },
      searchHandle() {
        this.search.current = 1
        this.loadData()
      },
      loadData() {
        SelectPage(this.search)
          .then((res) => {
            console.log('success:', res)
            this.tableData = res.data.records
            this.search.total = res.data.total
          })
          .catch((err) => {
            console.log('err:', err)
          })
      }
    },
    mounted() {
      this.loadData()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .tableimg {
    width: 45px;
  }
  .formlayout {
    padding: 20px 40px;
  }

$imgwidth: 100px;

.face-img {
  position: relative;
  height: $imgwidth;
  width: $imgwidth;
  background-color: #f1f2f3;
  // border: 1px solid #eee;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hiddle {
    visibility: hidden;
  }
  .avatar-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    height: $imgwidth;
    width: $imgwidth;
    &:hover {
      .avatar-uploader-icon {
        background-color: rgba(200, 200, 200, 0.5);
      }
      .hiddle {
        visibility: visible;
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    font-size: 28px;
    color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 30px;
    }
  }

  .avatar {
    height: $imgwidth;
    width: $imgwidth;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.list-img {
  height: 50px;
  width: 50px;
  line-height: 50px;
  border: 1px solid #f1f2f3;
}
  </style>
  